<template>
	<view style="background: #eee;height: 100vh;">
		<!-- <view style="width: 100%;height: 40rpx;background: #eee;"></view> -->
		<!-- 表单区域 -->
		<view style="padding: 26rpx 0;">
			<view style="padding: 0 20rpx;background: #fff;">
				<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
				<!-- <u-form :model="from" :rules="rules" ref="form1" labelWidth="160rpx">
					<u-form-item label="请假人:" prop="name" borderBottom ref="item1">
						<u-input v-model="from.name"></u-input>
					</u-form-item>
					<u-form-item label="请假类别:" borderBottom ref="item2">
						<u-input v-model="from.leaveCategory" disabledColor="#ffffff" placeholder="请选择"
							@click="typeShow=!typeShow">
						</u-input>
					</u-form-item>
					<u-form-item label="开始时间:" borderBottom ref="item2">
						<u-input v-model="from.leaveStartDate" disabledColor="#ffffff" placeholder="请选择"
							@click="startShow=!startShow">
						</u-input>
					</u-form-item>
					<u-form-item label="结束时间:" borderBottom ref="item2">
						<u-input v-model="from.leaveEndDate" disabledColor="#ffffff" placeholder="请选择"
							@click="endShow=!endShow">
						</u-input>
					</u-form-item>
					<u-form-item label="请假时长:" prop="name" borderBottom ref="item3">
						<u-input v-model="from.total+'天'"></u-input>
					</u-form-item>
					<u-form-item label="请假事由:" prop="name" borderBottom ref="item4"></u-form-item>
					<textarea v-model="from.leaveReason" placeholder="请输入请假事由" style="height: 90rpx;font-size: 30rpx;"
						adjust-position></textarea>

					<u-form-item label="联系方式:" prop="name" borderBottom ref="item3">
						<u-input v-model="from.contactWay"></u-input>
					</u-form-item>
					<u-form-item label="工作委托人:" prop="name" borderBottom ref="item3">
						<u-input v-model="from.dutyDeputy"></u-input>
					</u-form-item>
				</u-form> -->
			</view>
			<u-button type="primary" style="margin-top: 20rpx;width: 96%;" @click="add">提交</u-button>
			<!-- 请假类别 -->
			<w-picker :visible.sync="typeShow" mode="selector" value="请选择" :options="selectorList"
				:default-props="defaults" :current="true" fields="day" :disabled-after="false" ref="date"
				@confirm="onType($event,'date')"></w-picker>
			<!-- 开始时间 -->
			<w-picker :visible.sync="startShow" mode="half" startYear="2017" endYear="2029" value="2018-02-11 下午"
				:current="true" fields="day" :disabled-after="false" ref="date" @confirm="onStartTime($event,'date')">
			</w-picker>
			<!-- 结束时间 -->
			<w-picker :visible.sync="endShow" mode="half" startYear="2017" endYear="2029" value="2018-02-11 下午"
				:current="true" fields="day" :disabled-after="false" ref="date" @confirm="onEndTime($event,'date')">
			</w-picker>
		</view>
	</view>
</template>

<script>
	import wPicker from "@/components/w-picker/w-picker.vue";
	import {
		postLeave
	} from "@/api/api.js"

	export default {
		components: {
			wPicker
		},
		data() {
			return {
				typeShow: false,
				startShow: false,
				endShow: false,
				from: {
					name: "张三",
					leaveCategory: "请选择",
					leaveStartDate: "",
					leaveEndDate: "",
					total: 0,
					leaveReason: "感冒",
					contactWay: "13500000000",
					dutyDeputy: "李四"
				},
				selectorList: [{
					name: "请选择"
				}, {
					name: "病假"
				}, {
					name: "事假"
				}],
				defaults: {
					"label": "name"
				},
				rules: {
					'name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					}
				},
			};
		},
		mounted() {
			// 开始时间
			let startDate = new Date().toLocaleString().replace(/\//g, "-")
			let newDate = /\d{4}-\d{1,2}-\d{1,2}/g.exec(startDate)[0]
			this.from.leaveStartDate = newDate
			// console.log(this.leaveStartDate,newDate)
			// 86400000
			// 结束时间
			let endDate = Date.now()
			let b = /\d{4}-\d{1,2}-\d{1,2}/g.exec(new Date(endDate + 86400000).toLocaleString().replace(/\//g, "-"))[0]
			console.log(b)
			this.from.leaveEndDate = b
			// 请假天数
			let start = +new Date(newDate)
			let end = +new Date(b)
			console.log(start, end)
			let val = end - start
			console.log(val)
			let aa = new Date(val)
			this.from.total = Math.floor(aa / (1000 * 3600 * 24))
		},
		methods: {
			// 开始时间
			onStartTime(e) {
				console.log(e)
				this.from.leaveStartDate = e.result
				console.log(this.from.leaveStartDate.slice(0, 10))
				let start = +new Date(this.from.leaveStartDate.slice(0, 10))
				let end = +new Date(this.from.leaveEndDate.slice(0, 10))
				if (start > end) {
					uni.showToast({
						title: "开始时间不能大于结束时间",
						icon: "error",
						duration: 1500
					})
					let startDate = new Date().toLocaleString().replace(/\//g, "-")
					let newDate = /\d{4}-\d{1,2}-\d{1,2}/g.exec(startDate)[0]
					this.from.leaveStartDate = newDate
					return false
				}
				this.getDay()
			},
			// 结束时间
			onEndTime(e) {
				console.log(e)
				this.from.leaveEndDate = e.result
				this.getDay()
			},
			// 限制时间
			noDay() {
				let start = +new Date(this.from.leaveStartDate.slice(0, 10))
				let end = +new Date(this.from.leaveEndDate.slice(0, 10))
				if (start > end) {
					uni.showToast({
						title: "开始时间不能大于结束时间",
						icon: "error",
						duration: 1500
					})
					return false
				}

			},
			// 天数
			getDay() {
				let start = +new Date(this.from.leaveStartDate.slice(0, 10))
				let end = +new Date(this.from.leaveEndDate.slice(0, 10))
				console.log(start, end)
				let val = end - start
				console.log(val)
				let aa = new Date(val)
				this.from.total = Math.floor(aa / (1000 * 3600 * 24))
			},
			// 请假类别
			onType(e) {
				console.log(e.result)
				this.from.leaveCategory = e.result
			},
			// 提交请假
			async add() {
				this.from.leaveStartDate = this.from.leaveStartDate.replace('下午', "14:00:00")
				this.from.leaveEndDate = this.from.leaveEndDate.replace('下午', "14:00:00")
				this.from.leaveStartDate = this.from.leaveStartDate.replace('上午', "9:00:00")
				this.from.leaveEndDate = this.from.leaveEndDate.replace('上午', "9:00:00")
				let res = await postLeave(this.from)
				console.log(res)
				if (res.code == 200) {
					uni.showToast({
						title: '提交成功',
						duration: 1500,
						mask: false
					})
					uni.navigateTo({
						url: "/pages/flow-detail/flow-detail?id=" + res.result.id
					})
				}
			}
		},
	}
</script>

<style lang="scss">

</style>
